<template>
  <!-- 退费页面 -->
  <div class="refund-wrapper">
    <!-- 用于后期切换 -->
    <div class="refund-tabs" v-if="false">
      <div class="tab-item" :class="isTabActive === '退整单'? 'tab-item-active' : ''" @click="handleTabItem('退整单')">退整单</div>
      <div class="tab-item" :class="isTabActive === '退项目'? 'tab-item-active' : ''" @click="handleTabItem('退项目')">退项目</div>
      <div class="tab-item" :class="isTabActive === '退金额'? 'tab-item-active' : ''" @click="handleTabItem('退金额')">退金额</div>
    </div>
    <div class="refund-main">
      <!-- 公共部分 -->
      <div class="section-block" v-if="false">
        <div class="label">整单</div>
        <div class="content">
          <div class="tabel-head">
            <div class="head-item">收费总金额</div>
            <div class="head-item">可退金额</div>
          </div>
          <div class="tabel-main">
            <div class="row">
              <div class="col">{{'980'}}</div>
              <div class="col">{{'980'}}</div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="details">
        <span>明细</span>
        <span>使用馈赠金 </span>{{useGoldShow || 0}}
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          >
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            v-for="item in tableColumn"
            :prop="item.name"
            :label="item.label">
            <template #default="scope">
            {{scope.row.name}}
              <template v-if="item.name === 'count'">
                <el-input type="text" v-model="scope.row[item.name]" @change="handleChangeInput($event, scope.row, scope.$index, 'Number')"></el-input>
              </template>
              <template v-else-if="item.name === 'refundMoneyShow'">
                <el-input type="text" v-model="scope.row[item.name]" @change="handleChangeInput($event, scope.row, scope.$index, 'Money')"></el-input>
              </template>
              
              <span v-else>{{scope.row[item.name]}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 公共部分 -->
      <div class="collapse" v-if="false">
        <div class="collapse-left">
          <el-icon><CaretRight /></el-icon>
          <span>总计</span>
        </div>
        <div class="collapse-right">
          <div class="text">退费金额: </div>
          <div class="money">890</div>
        </div>
      </div>

      <div class="section-block" v-if="false">
        <div class="content-item">
          <div class="label">退费时间</div>
          <div class="content">
              <el-date-picker
                class="date-6"
                type="datetime"
                
                placeholder="选择时间"
                value-format="YYYY-MM-DD HH:mm:ss"
                >
            </el-date-picker>
          </div>
        </div>
        <div class="content-item">
          <div class="label">退费人</div>
          <div class="content">
            <el-select class="select-3"  clearable filterable placeholder="请选择">
              <el-option
                v-for="item in optionsPerson"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>
    <div class="switch-btns">
      <div>退款方式：</div>
      <el-button-group>
        <el-button class="btn-5" :class="{'active': refundToMoney}" @click="handleClick(true)" >现金</el-button>
        <el-button class="btn-5" :class="{'active': !refundToMoney}" @click="handleClick(false)" >余额</el-button>
        </el-button-group>
    </div>
    <div class="refund-footer">
      <el-button class="btn-2" size="small" @click="handleCancel" >取消</el-button>
      <el-button class="btn-2" size="small" @click="handleReturnOver" >退费</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { ElMessage } from 'element-plus';
import { defineComponent, ref, watch, reactive, toRefs } from 'vue';
import { refundOrderApi, getOrderInfoAndDetailApi } from '../../../../api/refund'
import {CaretRight} from '@element-plus/icons-vue'

type ReturnList = {
  detailId: number,
  count: number,
  refundMoneyShow: number
}
export default defineComponent({
  name: 'Refund',
  props: {
    orderId: {
      type: Number
    }
  },
  components: { CaretRight },
  setup(props, ctx) {
    let id = props.orderId || 0
    watch(() => props.orderId, (newV) => {
      id = Number(newV)
      getRefundDetails()
    } )

    const isTabActive = ref('退整单')
    const handleTabItem = (type:string) => {
      isTabActive.value = type
    }

    const datas = reactive({
      optionsPerson: [] as any[]
    })
    const tableData = ref([])
    const tableColumn = [
      {
        name: 'itemName',
        label: '项目名称'
      },
      {
        name: 'realPriceShow',
        label: '单价'
      },
      {
        name: 'number',
        label: '数量'
      },
      {
        name: 'detailRefundSumMoneyShow',
        label: '已退金额'
      },
      {
        name: 'refundCount',
        label: '已退数量'
      },
      {
        name: 'count',
        label: '退款数量'
      },
      {
        name: 'refundMoneyShow',
        label: '退款金额'
      },
    ]
    const list = ref<ReturnList[]>([])
    const refundToMoney = ref(true)
    const handleSelectionChange = (data: any) => {
      list.value = []
      console.log(data,'勾选看了')
      data.forEach((i:any) => {
          list.value.push({
            detailId: i.id,
            count: i.count,
            refundMoneyShow: i.refundMoneyShow
          })
      })
    }
    // 使用馈赠金
    const useGoldShow = ref(0)
    const getRefundDetails = async() => {
      tableData.value = []
      
      let result:any = await getOrderInfoAndDetailApi({}, id)
      tableData.value = result.data.details
      useGoldShow.value = result.data.useGoldShow
      
      tableData.value.forEach((item:any) => {
        item.count = item.number
        item.refundMoneyShow = item.count * item.realPriceShow
      })


    }
    getRefundDetails()

    const handleChangeInput = (val: number, data: any, index: number, type: string) => {
      if(type === 'Number') {
        console.log(val, data)
        if(val >= data.number) {
          data.count = data.number
        } else {
          data.refundMoneyShow = val * data.priceShow
        }
      }

      if(type === 'Money') {
        if(val > (data.realPriceShow * data.number)) {
          data.refundMoneyShow = data.realPriceShow * data.number
        }
      }
      
      console.log(val, data, index)
    }

    const handleCancel = () => {
      getRefundDetails()
      ctx.emit('cancelReturn')
    }
    const handleReturnOver = async() => {
      console.log('退费', list.value)
      let params = {
        orderId: id,
        list: list.value,
        refundToMoney: refundToMoney.value
      }
      if(list.value.length > 0) {
        console.log('有')
      
      let result:any = await refundOrderApi(params)
      if(result.code != 0) return ElMessage.error(result.msg + '错误')
        handleCancel()

        ctx.emit('refreshList')
      } else {
        ElMessage.warning('请选择退费项目')
        return false
      }
    }

    const handleClick = (val: boolean) => {
      refundToMoney.value = val
    }

    return {
      isTabActive,
      handleTabItem,
      ...toRefs(datas),

      tableData,
      tableColumn,
      handleSelectionChange,
      handleChangeInput,
      handleCancel,
      handleReturnOver,
      refundToMoney,
      handleClick,
      useGoldShow,

    }
  }
})
</script>

<style lang="scss" scoped>

.refund-tabs {
  padding-bottom: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;

  .tab-item {
    padding: 12px 15px;
    border: 1px solid #f5f5f5;
    cursor: pointer;

  }

  .tab-item-active {
    background-color: $mainColor;
    color: white;
  }
}

  .switch-btns {
    display: flex;
    align-items: center;
    margin-top: 10px;
  }
  .refund-footer {
    text-align: right;
  }


.section-block {
  margin: 10px 0  15px 0;
  display: flex;
  flex-wrap: wrap;
  .content {
    border: 1px solid #f5f5f5;
    .tabel-head {
      display: flex;
      align-items: center;
      width: 100%;
      background-color: #f3f7f7;
      
      .head-item {
        flex: 1;
        padding: 10px 15px;
        box-sizing: border-box;
        text-align: center;
      }
    }

    .tabel-main {
      .row {
        display: flex;
        align-items: center;

        .col {
          flex: 1;
          text-align: center;
          padding: 15px 20px;
        }
      }
    }
  }

  .content-item {
    width: 50%;
    display: flex;
    align-items: center;

    .label {
      padding-right: 10px;
    }

    .content {

    }
  }
}

.details > span:nth-child(2) {
  padding: 0 10px;
}

.collapse {
  display: flex;
  align-content: center;
  padding: 10px 15px;
  background-color: rgba(224, 250, 255, 3);
  cursor: pointer;
  .collapse-left {
    display: flex;
    flex-direction: row;
    align-content: center;
  }

  .collapse-right {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;

    .text {
      padding: 0 30px;
    }

    .money {
      font-size: 20px;
      font-weight: bold;
      color: #F7871D;
    }
  }

}
</style>